<template>
  <div>
      <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>角色管理</span>
            </div>
          </template>
          <el-button type="primary" icon="Plus" @click="add" v-if="roleErAdd">添加</el-button>
          <el-table :data="tableData" style="width: 100%" >
              <el-table-column label="序号" width="180" type="index"/>
              <el-table-column prop="roleCode" label="角色编码" width="180" />
              <el-table-column prop="roleName" label="角色名称" width="180" />
              <el-table-column prop="caozuo" label="操作">
                      <!--具名插槽-->
                      <template #default="caozuo">
                          <el-button type="primary" icon="edit" @click="edit(caozuo.row)" v-if="roleErEdit">修改</el-button>
                          <el-button type="primary" icon="delete" @click="del(caozuo.row.id)" v-if="roleErDel">删除</el-button>
                          <el-button type="primary" icon="Setting" @click="dakai(caozuo.row.id)" v-if="roleErFp">分配权限</el-button>
                      </template>
              </el-table-column>
          </el-table>

        
        </el-card>

        
         <!--点击新增按钮弹出对话框-->
         <el-dialog
              v-model="dialogVisible"
              title="添加"
              width="30%"
              :before-close="handleClose"
          >
           <el-form :model="addBean">
              <el-form-item label="角色编码" >
                <el-input  label-width="80%" v-model="addBean.roleCode"/>
              </el-form-item>
              <el-form-item label="角色名称" >
                <el-input  label-width="80%" v-model="addBean.roleName"/>
              </el-form-item>
            </el-form>

              <!--底部插槽-->
              <template #footer>
              <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="insert">确定</el-button>
              </span>
              </template>
          </el-dialog>



          <!--点击修改按钮弹出对话框-->
          <el-dialog
                v-model="editDialog"
                title="修改"
                width="30%"
                :before-close="handleClose"
            >
            <el-form :model="updateBean">
               <el-form-item label="角色id" >
                 <el-input  label-width="80%" v-model="updateBean.id" disabled/>
               </el-form-item>
                <el-form-item label="角色编码" >
                  <el-input  label-width="80%" v-model="updateBean.roleCode"/>
                </el-form-item>
                <el-form-item label="角色名称" >
                  <el-input  label-width="80%" v-model="updateBean.roleName"/>
                </el-form-item>
              </el-form>

                <!--底部插槽-->
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialog = false">取消</el-button>
                    <el-button type="primary" @click="update">确定</el-button>
                </span>
                </template>
            </el-dialog>


          <!--点击分配权限按钮弹出对话框-->

            <el-dialog
            v-model="fpDialog"
            title="分配权限"
            width="30%"
            :before-close="handleClose"
        >
            <el-tree
              ref="tree"
              :data="data"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="checkedArr"
              :props="defaultProps"
            >
           </el-tree>
           <el-button @click="fpDialog = false">取消</el-button>
           <el-button type="success" @click="fpAuth">确定</el-button>
          </el-dialog>
       
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,reactive} from 'vue'
//引入后端接口
import {getRoleList,addRole,deleteRole,editRole,getMenuList,getRoleAuth,setRoleAuth,getMyAuth} from '@/api/index'
import { ElMessage, ElMessageBox } from 'element-plus'

//----------------------查询-----------------------
//表格数据
let tableData=ref([]);

//获取分页数据
let getData=async ()=>{
  //必须异步阻塞去获取 否则拿到的就是一个Promise对象
  let res=await getRoleList();
  tableData.value=res.data;
}

//加载时调用
onMounted(()=>{
  //调用查询
  getData();
  //获取按钮权限
  getAuthData();
})

//----------------------添加-----------------------

//添加对象
let addBean=reactive({
  roleCode:'',
  roleName:''
})
//默认不显示对话框
let dialogVisible=ref(false)
//添加显示对话框
let add=()=>{
    //显示对话框
    dialogVisible.value=true;
    
    //把输入框显示的内容清空
    addBean.roleCode='';
    addBean.roleName='';
}

//添加角色 调用后端接口
let insert= async ()=>{
    //调用后端添加品牌方法
    let res=await addRole(addBean);
    console.log(res);
    if(res.code=='200'){
      //执行成功后关闭对话框
      dialogVisible.value=false;
      ElMessage.success('添加成功')
      //调用查询刷新界面
      getData();
    }else{
      //弹窗错误消息
      ElMessage.error(res.msg);
    }
}

//----------------------修改-----------------------

//修改对象
let updateBean=reactive({
  id:null,
  roleCode:'',
  roleName:''
})
//默认不显示对话框
let editDialog=ref(false)
//显示对话框
let edit=(row)=>{
    //显示对话框
    editDialog.value=true;
    
    //把输入框显示内容赋值
    updateBean.id=row.id;
    updateBean.roleCode=row.roleCode;
    updateBean.roleName=row.roleName;

}

//修改角色 调用后端接口
let update= async ()=>{
    //调用后端添加品牌方法
    let res=await editRole(updateBean);
    console.log(res);
    if(res.code=='200'){
      //执行成功后关闭对话框
      editDialog.value=false;
      ElMessage.success('修改成功')
      //调用查询刷新界面
      getData();
    }else{
      //弹窗错误消息
      ElMessage.error(res.msg);
    }
}

//----------------------删除-----------------------
let del=async (id)=>{
  await ElMessageBox.confirm(
    '确定删除吗?',
    '删除',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      deleteRole({
        id:id
      }).then((res)=>{
        if(res.code=='200'){
            ElMessage.success('删除成功')
            //调用查询刷新界面
            getData();
          }else{
            //弹窗错误消息
            ElMessage.error(res.msg);
          }
      })
      
     
    })
    .catch(() => {
      
    })


    
}



//----------------------分配权限-----------------------
const fpDialog = ref(false)
 

//定义后端的显示字段
const defaultProps = {
  children: 'children',
  label: 'name',
}
 
//显示的数组
let data=ref([])
 
//选中的数组
let checkedArr=ref([])
 
//选中的树的id数组
let tree=ref([])
 
//分配权限 那一列的 角色id
let authRoleId=ref()
 
 //打开树
let dakai=async(id)=>{
  //先把选择的清空掉
  checkedArr.value=null;
  //调用后端权限方法
  let res=await getMenuList();
  if(res.code=='200'){
    data.value=res.data;
    //赋值给角色id
    authRoleId.value=id;
    //获取当前角色对应的权限
    getRoleAuth({
      roleId:id
    }).then((auths)=>{
        //选中的数组赋值
        checkedArr.value= getCheck(data.value,[],auths.data);
        fpDialog.value=true;
    });
  }
}
 
//选中的数组遍历
let getCheck=(item:any,arr:any,auths:any)=>{
  item.forEach(x => {
         if(x.isType=='2' && auths.indexOf(x.auth)!==-1){
            console.log(x.auth,'------',auths)
            //如果是按钮 并且选中了 那么设置树展示
            arr.push(x.id)
         }
         if(x.children && x.children.length>0){
            //如果有子集那么递归子集
            getCheck(x.children,arr,auths)
         }
  });
  return arr;
}
 
//分配权限方法
let fpAuth= async()=>{
  //拿到当前选中的节点的id数组
  let menuIds=tree.value.getCheckedKeys();
  //为角色分配权限
  let res=await setRoleAuth({
    roleId:authRoleId.value,
    menuIds:menuIds
  });
  if(res.code=='200'){
    authRoleId.value='';
    ElMessage.success('分配成功')
    //调用查询刷新界面
    getData();
  }else{
    //弹窗错误消息
    ElMessage.error(res.msg);
  }
  //关闭窗口
  fpDialog.value = false;
  
  
}

//--------------------------按钮显示隐藏----------------------------
//按钮权限
//添加按钮默认不显示
let roleErAdd=ref(false);
//分配权限按钮默认不显示
let roleErFp=ref(false);
//修改按钮默认不显示
let roleErEdit=ref(false);
//删除按钮默认不显示
let roleErDel=ref(false);

let getAuthData= async()=>{
  //获取菜单权限
  let res=await getMyAuth();
  //如果存在对应的权限 才显示按钮
  if(res.data.indexOf('role:er:add')!==-1){
    roleErAdd.value=true;
  }
  if(res.data.indexOf('role:er:del')!==-1){
    roleErDel.value=true;
  }
  if(res.data.indexOf('role:er:edit')!==-1){
    roleErEdit.value=true;
  }
  if(res.data.indexOf('role:er:fp')!==-1){
    roleErFp.value=true;
  }
  
}
 

</script>

<style scoped>

</style>

<style>

</style>